<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue指令练习</title>
		<style>
			/* 为属性设置隐藏 */
			[v-cloak]{
				display: none;
				}
		</style>
	</head>
	<body>
		<div id="app" v-cloak><!-- v-cloak 当浏览器解析js完成前
		，用户看到的数据是{{msg}}，直到浏览器加载完成全部js，
		则{{msg}}替换为具体的数据
		 需求：不想让用户看到没有解析的数据，使用v-cloak属性
		-->
		<!-- v-tesxt 将上述v-cloak优化 -->
		<!-- v-html 动态展现了 -->
		测试v-tesx 语法
		<h1 v-text="msg"></h1>
		<hr />
		测试 v-cloak 语法
			<h1>{{msg}}</h1>
			<hr />
			测试v-html语法
			<span v-html="html"></span>
			<hr />
			<!-- 语法：v-pre vue直接跳过该标签不解析 -->
			<span v-pre>{{msg}}</span>
			<hr />
			v-once:数据只解析一次
			<span v-once='one'></span>
			
			
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					msg: '测试数据',
					html: '<h3>测试html语法</h3>',
					one: '数据解析1次'
				}
			})
		</script>
	</body>
</html>
